<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
    <title>属性选择器示例</title>
    <style>
        /* 高亮选择的元素 */
        .selected{
            background-color: yellow;
        }
    </style>
</head>
<body>
<p data-group="A">Group A <button onclick="sel('A')">切换属性选择</button></p>
<p data-group="B">Group B <button onclick="sel('B')">切换属性选择</button></p>
<p data-group="C">Group C <button onclick="sel('C')">切换属性选择</button></p>
<script>

    function addClass(ele) {
        // 选择具有data-group属性且属性值为A的元素
        let selectedElements = document.querySelectorAll(`[data-group=${ele}]`);
        // 遍历选择的元素，并添加selected class
        for (let i = 0; i < selectedElements.length; i++) {
            // Element.classList 是一个只读属性，返回一个元素 class 属性的动态 DOMTokenList 集合。这可以用于操作 class 集合。
            // .add()方法给元素添加class
            if (selectedElements[i].classList.contains('selected')) {
                selectedElements[i].classList.remove('selected');
            }
            else {
                selectedElements[i].classList.add('selected');
            }

        }
    }
    function sel(ele) {
        addClass(ele)
    }
</script>
</body>
</html>
